<template>
  <div>
    <div class="nav">
      <ul class="nav-content">
        <li>H5开发</li>
        <li>网站开发</li>
        <li>小程序</li>
        <li>平面设计</li>
      </ul>
    </div>
    <div class="content">
      <ul class="content-imgs">
        <li
          class="item-img-wrapper"
          v-for="item of list"
          :key="item.id"
        >
          <img :src="item.imgUrl" class="item-img">
          <p class="img-desc">{{item.desc}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Main',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
  .nav
    .nav-content
      display flex
      justify-content space-around
      height .36rem
      padding-top .12rem
      font-size .22rem
      color #464646
      background-color #F5F5F5
  .content
    display flex
    justify-content center
    margin-bottom .15rem
    .content-imgs
      display flex
      flex-wrap wrap
      justify-content flex-start
      width 90%
      .item-img-wrapper
        overflow hidden
        display flex
        flex-direction column
        justify-content space-around
        margin .1rem .05rem 0 .08rem
        .item-img
          width 1.53rem
          height 2.58rem
        .img-desc
          font-size .14rem
          margin-top .065rem
          text-align center
</style>
